import React from "react";
import { Swiper } from 'antd-mobile';
import './comCss/ProductCarousel.scss';

// 组件接收 images 数组作为参数
interface ProductCarouselProps {
    images: string[];
    height?: number; // 可选，允许自定义高度
}

const ProductCarousel: React.FC<ProductCarouselProps> = ({ images, height = 200 }) => {
    // 判断是否多张图片
    if (!images || images.length === 0) return <div>无图片</div>;
    if (images.length === 1) {
        // 只有一张图片时
        return (
            <div className="product-carousel-container">
                <img
                    src={images[0]}
                    alt="商品图片"
                    className="product-carousel-img"
                    style={{ height }}
                />
            </div>
        )
    }

    // 多张图片时
    return (
        <div className="product-carousel-container">
            <Swiper>
                {
                    images.map((img, idx) => {
                        return (
                            <Swiper.Item key={idx}>
                                <img
                                    src={img}
                                    alt={`商品图片${idx + 1}`}
                                    className="product-carousel-img"
                                    style={{ height }}
                                />
                            </Swiper.Item>
                        )
                    })
                }
            </Swiper>
        </div>

    )
}

export default ProductCarousel;